<template>
    <view class="hero-select">
        <!-- 搜索框 -->
        <!-- <view class="search-box">
            <van-field class="search-input" input-align="left" :value="searchVal" placeholder="搜索英雄名称或首字母"
                @input="onSearchInput" />
        </view> -->

        <!-- 内容滚动区域 -->
        <scroll-view scroll-y class="content-scroll" :scroll-into-view="scrollIntoView">
            <!-- 首字母导航 -->
            <view class="letter-nav" id="letter-nav">
                <view class="letter-item" v-for="(letter, index) in letters" :key="index"
                    @click="scrollToLetter(letter)" :style="{ color: activeLetter === letter ? '#4662D9' : '#333' }">
                    {{ letter }}
                </view>
            </view>

            <!-- 英雄分组 -->
            <view class="hero-group" v-for="(group, index) in groupedHeroes" :key="index" :id="'group-' + group.letter">
                <view class="group-title">{{ group.letter }}</view>
                <div class="hero-items">
                    <view class="hero-item" v-for="(hero, idx) in group.heroes" :key="idx" @click="selectHero(hero)">
                        {{ hero.text }}
                    </view>
                </div>
            </view>
        </scroll-view>
    </view>
</template>

<script>
import { pinyin } from 'pinyin-pro'

export default {
    props: {
        heroList: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            searchVal: '',
            activeLetter: '',
            scrollIntoView: '',
            groupedHeroes: []
        }
    },
    computed: {
        letters() {
            return [...new Set(
                this.groupedHeroes.map(group => group.letter)
            )].sort()
        }
    },
    // 如果需要监听 heroList 的变化，可以取消下面的注释
    // watch: {
    //     heroList: {
    //         handler(newVal) {
    //             console.log('Watching heroList:', newVal);
    //             this.processHeroes(newVal);
    //         },
    //         immediate: true, // 立即执行一次 handler
    //         deep: true // 如果 heroList 是复杂对象数组，可能需要深度监听
    //     }
    // },
    mounted() {
        // 处理初始数据
        console.log('Mounted, processing heroes:', this.heroList);
        this.processHeroes(this.heroList)
    },
    methods: {
        processHeroes(heroes) {
            const groups = []
            console.log('Processing heroes:', heroes);
            heroes.forEach(hero => {
                const firstChar = this.getFirstChar(hero.text)
                let existingGroup = groups.find(g => g.letter === firstChar)
                if (!existingGroup) {
                    existingGroup = { letter: firstChar, heroes: [] };
                    groups.push(existingGroup)
                }
                existingGroup.heroes.push(hero)
            })

            this.groupedHeroes = groups.sort((a, b) =>
                a.letter.localeCompare(b.letter)
            )
        },

        getFirstChar(text) {
            // 使用 pinyin-pro 获取首字母
            const pn = pinyin(text, {
                pattern: 'initial',  // 获取首字母
                toneType: 'none',    // 不带声调
                type: 'array'        // 返回数组
            })

            // 取第一个字符并处理
            let firstChar = pn[0]?.[0] || ''
            if (firstChar == '') {
                // 对于没有拼音首字母的（例如数字或特殊字符），可以指定一个默认值或进行其他处理
                // 这里暂时将其归类到 '#' 或其他标记，或者根据需求处理
                firstChar = '#'; // 或者 'a'，取决于你的分组逻辑
            } else if (!/^[a-zA-Z]$/.test(firstChar)) {
                // 如果不是单个英文字母（可能是多音字等情况），也归类到 '#'
                firstChar = '#';
            }

            return firstChar.toUpperCase();
        },

        onSearchInput(e) {
            // 在 Vue 2 中，van-field 的 input 事件通常直接传递值，而不是在 e.detail 中
            // 请根据实际情况确认事件参数结构，可能是 e 或 e.target.value
            // 假设直接是值：
            this.searchVal = e;
            // 如果值在 e.detail 中：
            // this.searchVal = e.detail;
            this.filterHeroes()
        },

        filterHeroes() {
            if (!this.searchVal) {
                this.processHeroes(this.heroList)
                return
            }

            const searchLower = this.searchVal.toLowerCase()
            const filtered = this.heroList.filter(hero =>
                hero.text.toLowerCase().includes(searchLower) ||
                this.getFirstChar(hero.text).toLowerCase() === searchLower
            )

            this.processHeroes(filtered)
        },

        scrollToLetter(letter) {
            this.activeLetter = letter
            this.scrollIntoView = `group-${letter}`
        },

        selectHero(hero) {
            this.$emit('select', hero) // 使用 this.$emit 触发事件
            this.scrollIntoView = ''
            this.activeLetter = ''
        }
    }
}
</script>

<style scoped>
.hero-select {
    padding-top: 20rpx;
    height: 1000rpx;
}

.search-box {
    padding: 20rpx;
    background-color: #f5f5f5;
}

.search-input {
    width: 100%;
    height: 64rpx;
    background-color: #fff;
    border-radius: 32rpx;
    padding: 0 30rpx;
}

.content-scroll {
    height: calc(100vh - 160rpx);
}

/* 首字母导航 */
.letter-nav {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 20rpx;
    right: 20rpx;
    z-index: 10;
}

.letter-item {
    font-size: 24rpx;
    padding: 8rpx 0;
    cursor: pointer;
}

/* 英雄分组 */
.hero-group {
    padding-right: 80rpx;
}

.group-title {
    font-size: 40rpx;
    font-weight: bold;
    padding: 20rpx;
    padding-left: 40rpx;
    color: #333;
}

.hero-items {
    display: flex;
    flex-wrap: wrap;
}

.hero-item {
    width: 22%;
    background-color: #eee;
    border-radius: 10px;
    font-size: 24rpx;
    padding: 20rpx;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: center;
    margin-left: 20rpx;
    margin-bottom: 20rpx;
}

.hero-item:last-child {
    border-bottom: none;
}
</style>